<template>
	<view class="index" :class="reviewStatus? 'review':''">
		
		<!-- 小程序审核用的布局 -->
		<block v-if="reviewStatus">
			
			<banner :ad-list="bannerList" h=216.5></banner>
			
			<shop-goods-list :goods="recommend" title="为您推荐" showType="2"></shop-goods-list>
			
		</block>
		
		
		<block v-else>
		<!-- 头部 -->
		<uni-nav-bar fixed="true" status-bar="true">
		   <view class="search">
			   <view class="input-box" @tap="toSearch()"><uni-icon type="search" size="20"></uni-icon> 输入搜索内容</view>
			   <navigator url="../feedback/webmail" class="cart">
				   <image src="/static/icon/me/me_ic_news.png" mode=""></image>
				   
			   </navigator>
			   
		   </view>	   
		</uni-nav-bar>

		<!-- 商品分类 -->
		<view class="category">
			<view class="left" @tap="searchCate = false" :class="!searchCate?'active':''"><text>首页</text></view>
			<view class="list">

				<scroll-view class="scroll-cate" scroll-x="true" @scroll="scroll">
					<view class="cate-item" :class="(searchCate && item.id == topCateId)?'active':''" @tap="getSonCateAndGoods(item)"
					 v-for="(item,index) in category" :key="index">
						<text>{{item.name}}</text>
					</view>

				</scroll-view>

			</view>
			<!-- <view class="more"><uni-icon type="arrowdown"></uni-icon></view> -->
		</view>
		
		
		

		<block v-if="searchCate">
			<!-- 活动 -->
			<view class="action" v-if="sonCate.length > 0">
				<view class="action-item" :class="item.id == cateId?'active':''" @tap="selectSonCate(item)" v-for="(item, index) in sonCate"
				 :key="index">
					<view class="icon">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="title">{{item.name}}</view>
				</view>

			</view>

			<!-- 排序 -->
			<view class="sort" :class="sortFexid?'fixed':''">
				<view class="left">

					<view class="item" @tap="selectSort(item, index)" :class="sortIndex == index ? 'active': ''" v-for="(item, index) in sort"
					 :key="index">

						{{item.name}}
						<uni-icon :type="sortItemIndex == 0 ? item.down_icon: item.up_icon" size="20" v-if="sortIndex == index"></uni-icon>
					</view>
				</view>

			</view>

			<goods-list :goods="cateGoods" :price-name="priceName" goods-type="tbk" show-type="2"></goods-list>
		</block>
		<block v-else>
			
			<banner :ad-list="bannerList" h=216.5></banner>


			<!-- 活动 -->
			<!-- #ifdef MP-WEIXIN -->
				<row-category :ad-list="topCate" width="187.5rpx"></row-category>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
				<row-category :ad-list="topCate" width="187.5upx"></row-category>
			<!-- #endif -->
			
			
			<!-- <view class="notice" v-if="notices.length > 0">
				<view class="title">返利通知：</view>
				<swiper :vertical="true" :circular="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item, index) in notices" :key="index">
						<view class="swiper-item text-gray">
							<text class="text-danger">{{item.mobile}}</text> 获得佣金 <text class="text-danger">{{item.amount}}</text>元
						</view>
					</swiper-item>
				
				
				</swiper>
			</view> -->


			<!-- 大家都在领 -->
			<!-- <scroll-goods></scroll-goods> -->
			
			<!--  -->
			<view class="type-title">
				<image src="../../static/title_bg.png" mode="widthFix"></image>
				精品推荐
			</view>

			<view class="tabbar">

				<view class="item" @tap="typeIndex = index" :class="index == typeIndex ? 'active' : ''" v-for="(item, index) in typeList"
				 :key="index">
					<view><text>{{item.name}}</text></view>
				</view>

			</view>


			<goods-list :goods="typeList[typeIndex]['goodsList']" :price-name="priceName" :goods-type="typeList[typeIndex]['value']"></goods-list>
		</block>
		</block>
		<!-- <weixin-auth></weixin-auth> -->
	</view>
</template>

<script>
	import uniIcon from '../../components/uni-icon.vue';
	import goodsList from '../../components/coupon-goods-list.vue';
	import banner from '../../components/banner.vue';
	import rowCategory from '../../components/row-category.vue';
	import weixinAuth from '../../components/weixin-auth.vue';
	import uniNavBar from '../../components/uni-nav-bar.vue';
	import uniBadge from '../../components/uni-badge.vue';
	import shopGoodsList from '../../components/goods-list.vue';
	
	import {
		priceName, appName
	} from '../../common/config.js';
	import Request from '../../common/request.js';

	export default {
		components: {
			uniIcon, weixinAuth,
			goodsList, uniBadge,
			banner, rowCategory,
			uniNavBar, shopGoodsList
		},
		data() {
			return {
				typeList: [{
						name: '淘宝/天猫',
						goodsList: [],
						value: 'tbk'
					},
					{
						name: '京东',
						goodsList: [],
						value: 'jd'
					},
					{
						name: '拼多多',
						goodsList: [],
						value: 'pdd'
					}
				],
				typeIndex: 0,
				bannerList: [],
				category: [],
				topCate: [],
				searchCate: false,
				topCateId: 0,
				cateId: '',
				sonCate: [],
				keyword: '',
				cateGoods: [],
				page: 1,
				nextPage: true,
				sortType: '',
				sortIndex: -1,
				sortItemIndex: 0,
				sortFexid: false,
				topHeight: 0,
				priceName: '',
				sort: [{
						name: '销量',
						down_icon: 'arrowdown',
						down_value: 'total_sales_des',
						up_icon: 'arrowup',
						up_value: 'total_sales_asc',
					},
					{
						name: '价格',
						down_icon: 'arrowdown',
						down_value: 'price_des',
						up_icon: 'arrowup',
						up_value: 'price_asc'
					},
					{
						name: '佣金',
						down_icon: 'arrowdown',
						down_value: 'tk_rate_des',
						up_icon: 'arrowup',
						up_value: 'tk_rate_asc'
					}
				],
				notices: [],
				reviewStatus: false,
			}
		},
		onLoad(e) {
			var that = this;
			this.reviewStatus = false;
			// #ifdef MP-WEIXIN
				this.reviewStatus = true;
				Request.send({
					url: 'weixinauth/getConfig',
					sCallback: function(res) {
						console.log(res);
						if(res.data.version != '1.0.0') {
							that.reviewStatus = false;
						} else {
							that.getShopGoods();
						}
						
					}
				})
			// #endif
			
			var token = uni.getStorageSync('token');
			console.log('index data');
			console.log(e);
			if(e.rUserId) {
				uni.setStorageSync('recommendId', e.rUserId)
			}
			if(!token) {
				// #ifdef MP-WEIXIN
					uni.reLaunch({
						url: '/pages/my/auth'
					})
				// #endif
				
				// #ifndef MP-WEIXIN
					uni.reLaunch({
						url: '/pages/my/login'
					})
				// #endif
				
				return;
			} else {
				this.priceName = priceName;
				this.getCategory();
				this.getTbkGoods();
				this.getJdGoods();
				this.getPddGoods();
				this.getNotice();
			}
			
			
		},
		onReachBottom() {
			if (this.searchCate) {
				this.searchGoods();
			}
		},
		
		onPullDownRefresh() {
			// this.onLoad();
			uni.stopPullDownRefresh();
		},
		
		onShareAppMessage() {
			var userinfo = uni.getStorageSync('userinfo');
			Request.send({
				url: 'share/addRecord',
				data: {
					type: 1
				},
				checkCode: false
			})
			return {
				title: appName,
				path: '/pages/coupon/index?rUserId='+userinfo.id,
			}
		},

		onPageScroll(e) {
			// console.log(e)
			if(this.searchCate) {
				if (e.scrollTop < this.topHeight) {
					this.sortFexid = false;
				} else {
					this.sortFexid = true;
				}
			}
			
		},


		methods: {
			//获取首页接口数据
			getShopGoods: function(callback){
				var that = this;
				var params = {
					url: 'index/index',
					needLogin: false,
					sCallback: function(res) {
						that.recommend = res.data.recommend;
					}
				}
				
				Request.send(params);
			},
			scroll: function(e) {
				// console.log(e)
				// this.old.scrollTop = e.detail.scrollTop

			},
			
			getNotice() {
				var that = this;
				Request.send({
					url: 'coupon/index',
					sCallback: function(res) {
						that.notices = res.data;
					}
				})
			},

			toSearch: function() {
				uni.navigateTo({
					url: '/pages/coupon/search?type_index=0&keyword=' + this.keyword
				})
			},

			getCategory: async function() {
				var that = this;
				var params = {
					url: 'coupon/getCategory',
					data: {
						pid: this.topCateId
					},
					sCallback: function(res) {
						
							if (that.topCateId == 0) {
								that.category = res.data;
							} else {
								that.sonCate = res.data;
							}
					}
				}
				Request.send(params);
			},

			getTbkGoods: function() {
				var that = this;
				var params = {
					url: 'tbk/dgOptimusMaterial',
					data: {
						page: 1
					},
					sCallback: function(res) {
						
							that.bannerList = res.data.banner;
							that.topCate = res.data.category;

							that.typeList[0]['goodsList'] = res.data.goods;
						
					}
				}
				Request.send(params);
			},

			getJdGoods: function() {
				var that = this;
				var params = {
					url: 'jd/getRecommendGoods',
					data: {
						page: 1
					},
					sCallback: function(res) {

					


							that.typeList[1]['goodsList'] = res.data;


					}
				}
				Request.send(params);
			},

			getPddGoods: function() {

				var that = this;
				var params = {
					url: 'pdd/goodsList',
					data: {},
					sCallback: function(res) {


							that.typeList[2]['goodsList'] = res.data;


					}
				}
				Request.send(params);
			},
			//获取下级分类及商品
			getSonCateAndGoods: function(item) {
				this.searchCate = true;
				this.cateId = item.id;
				this.topCateId = item.id;
				this.keyword = item.name;
				this.page = 1;
				this.nextPage = true;
				this.cateGoods = [];
				this.getCategory();
				this.searchGoods();

			},
			//选择了二级分类
			selectSonCate: function(item) {
				this.searchCate = true;
				this.cateId = item.id;
				this.keyword = item.name;
				this.page = 1;
				this.nextPage = true;
				this.cateGoods = [];
				this.getCategory();
				this.searchGoods();
			},
			//搜索分类商品
			searchGoods: function() {
				if (!this.nextPage) {
					return false;
				}

				var that = this;
				var params = {
					url: 'tbk/dgMaterialOptional',
					data: {
						keyword: that.keyword,
						page: that.page,
						sort: that.sortType
					},
					sCallback: function(res) {
						// console.log(res);
						
							that.cateGoods = that.cateGoods.concat(res.data);
							that.page++;
							if (res.data.length < 20) {
								that.nextPage = false
							}
					

						let view = uni.createSelectorQuery().select(".sort");
						view.boundingClientRect(data => {
							that.topHeight = data.top;
							// 								  console.log("得到布局位置信息" + JSON.stringify(data));
							// 								  console.log("节点离页面顶部的距离为" + data.top);
						}).exec();
					}
				}
				Request.send(params);
			},
			//选择排序方式
			selectSort: function(item, index) {
				if (this.sortIndex == index) {
					this.sortItemIndex = this.sortItemIndex == 1 ? 0 : 1;
				} else {
					this.sortItemIndex = 0;
				}

				if (this.sortItemIndex == 0) {
					this.sortType = this.sort[index]['down_value'];
				} else {
					this.sortType = this.sort[index]['up_value'];
				}

				this.page = 1;
				this.nextPage = true;
				this.cateGoods = [];
				this.sortIndex = index;
				this.searchGoods();
			}
		}
	}
</script>

<style>
	page{
		background: #fff;
	}
	
	
	view{
		display: flex;
		font-size: 26upx;
	}
	.index {
		width: 100%;
		flex-direction: column;
		background: #F5F5F5;
		padding-top: 170upx;
	}
	
	.index.review{
		padding-top: 0;
	}

	/* 顶部搜索开始 */
		
		.uni-navbar .search{	
			align-items: center;
			display: flex;
			width: 100%;
			height: 100%;
			pause: 10upx 20upx;
		}
		
		
		.search .input-box{
			background: #F1F3F5;
			color: #999999;
			font-size: 24upx;
			border-radius: 30upx;
			flex: 1;
			text-align: center;
			margin-right: 30upx;
			padding: 0 30upx;
			height: 60upx;
			display: flex;
			align-items: center;
		}
		
		.search .cart{
			
			display: flex;
			justify-content: flex-end;
			
		}
	
		.search .cart image{
			width: 60upx;
			height: 60upx;
		}
	/* 顶部搜索结束 */


	/* 分类开始 */
	.category {
		background: #fff;
		height: 40px;
		line-height: 40px;
		border-bottom: 1upx solid #eee;
		position: fixed;
		top: 44px;
		z-index: 99;
		width: 750upx;
		
	}
	
	
	/* #ifdef APP-PLUS */
	.category{
		top: 68px;
	}
	/* #endif */

	.category .left {
		display: flex;
		justify-content: center;
		width: 100upx;
		align-items: center;
		
	}

	.category .left text {
		
		
		text-align: center;
		line-height: 40upx;
		height: 40upx;
	}

	.category .list {
		width: 100%;
		overflow: hidden;
		padding-right: 10upx;
	}

	.category .scroll-cate {
		white-space: nowrap;
		display: flex;
		align-items: center;
		flex: 1;
	}


	.category .cate-item {
		display: inline-block;
		flex: 1;
		padding: 0 30upx;
		text-align: center;
		height: 80upx;
		line-height: 80upx;
	}

	.category .active {
		color: #FC3F78;
	}
	
	.category .active text{
		border-bottom: 1upx solid #FC3D3D;
	}

	.category .more {
		color: #999;
		width: 100upx;
		justify-content: center;
		align-items: center;
	}

	/* 分类结束 */



	/* 热门开始 */
	.hot {
		font-size: 0;
	}

	.hot image {
		width: 750upx;
		height: 210upx;
	}

	/* 热门结束 */

	/* 活动开始 */
	.action {
		width: 750upx;
		flex-wrap: wrap;
		background: #fff;
		padding-top: 30upx;
	}

	.action .action-item {
		width: 187.5upx;
		flex-direction: column;
		color: #999;
		padding-bottom: 30upx;
	}

	.action .action-item.active {
		color: #FA4DBE;
	}

	.action .action-item>view {
		justify-content: center;
	}

	.action .icon image {
		width: 120upx;
		height: 120upx;
	}

	/* 活动结束 */

	/* 选项卡开始 */
	.tabbar {
		flex: 1;
		position: relative;
	}

	.tabbar .item {
		width: 33.333%;
		background: #fff;
		/* color: #fff; */
		height: 80upx;
		align-items: center;
		justify-content: center;
		
	}
	
	.tabbar .item>view{
		border-right: 1upx solid #eee;
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	.tabbar .item:nth-child(3) text {
		border: none;
	}
	
	.tabbar .item text{
		box-sizing: border-box;
		border-bottom: 8upx solid #fff;
	}

	.tabbar .item.active text{
		color: #FD5757;
		border-bottom: 8upx solid #FD5757;
	}

	/* 选项卡结束 */


	.sort {
		width: 750upx;
		background: #fff;
		border-bottom: 1upx solid #eee;
		box-sizing: border-box;
		border-top: 1upx solid #eee;
	}

	.sort.fixed {
		position: fixed;
		top: 84px;
		left: 0;
		z-index: 99;
	}

	.sort .right {
		width: 80upx;
		justify-content: center;
		align-items: center;
		color: #999;
	}

	.sort .left {
		flex: 1;
	}

	.sort .item {
		display: flex;
		height: 70upx;
		align-items: center;
		flex: 1;
		justify-content: center;
		color: #666;
		font-size: 24upx;
	}

	.sort .item.active {
		color: #FA4DBE;
	}
	
	.notice{
		background:  #fff;
		margin: 10upx 0;
		display: flex;
		align-items: center;
	}

	.notice .title{
		width: 200upx;
		justify-content: center;
		color: #e60012;
		font-weight: 600;
	}

	.notice  swiper {
		display: flex;
		flex: 1;
		width: 100%;
		height: 80upx;
		align-items: center;
		line-height: 80upx;
	}
	
	.notice .swiper-item{
		height: 80upx;
		line-height: 80upx;
	}
	
	.type-title{
		height: 80upx;
		position: relative;
		background: rgba(235,147,166, 0.5);
		display: flex;
		justify-content: center;
		text-align: center;
		align-items: center;
		color: #E60012;
		font-size: 40upx;
		font-weight: 600;
		letter-spacing: 8upx;
		border-bottom: 1upx solid rgba(235,147,166, 0.5);
	}
	
	.type-title image{
		width: 750upx;
		position: absolute;
	}
</style>
